<template>
  <div ref="clouds" style="width: 100%; height: 100vh" class="home" id="home">
    <div class="home-left">
      <div class="home-left-header">
        <p class="home-left-header-word">通过关键词搜索</p>
      </div>
      <div class="home-left-search">
        <div class="home-left-search-input">
          <el-input placeholder="请输入关键词" class="input-with-select" v-model="compValue.keyword">
          </el-input>
          <el-button type="primary" icon="el-icon-search" class="home-left-search-input-btn"
            v-on:click="searchKeyword">搜索</el-button>
        </div>
        <div class="home-left-search-high">
          <div class="home-left-search-high-date">
            <el-date-picker v-model="compValue.startDate" type="date" placeholder="选择起始日期"
              class="home-left-search-high-date-start" value-format="yyyy-MM-dd">
            </el-date-picker>
            -
            <el-date-picker v-model="compValue.endDate" type="date" placeholder="选择结束日期"
              class="home-left-search-high-date-end" value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
          <div class="home-left-search-high-num">
            <el-select v-model="compValue.num" placeholder="结果个数" class="home-left-search-high-num-select">
              <el-option v-for="item in nums" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="home-left-table">
        <el-button type="primary" @click="resetTagFilter">清除标签过滤器</el-button>
        <el-table ref="filterTable" :data="competeTableData.slice(
          (currentPage - 1) * pageSize,
          currentPage * pageSize
        )
          " style="width: 100%" @row-click="toTrend" max-height="550">
          <el-table-column prop="compKeyword" label="竞争关键词" width="220">
          </el-table-column>
          <el-table-column prop="competitiveness" label="竞争度" :formatter="formatter">
          </el-table-column>
          <el-table-column prop="competitiveLevel" label="竞争值" width="100" column-key="competitiveLevel" :filters="[
            { text: '低', value: '低' },
            { text: '中', value: '中' },
            { text: '高', value: '高' },
          ]" :filter-method="filterTag" filter-placement="bottom-end">
            <template slot-scope="scope">
              <el-tag :type="scope.row.competitiveLevel === '高'
                ? 'danger'
                : scope.row.competitiveLevel === '中'
                  ? 'warning'
                  : 'info'
                " disable-transitions>{{ scope.row.competitiveLevel }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="competeTableData.length">
        </el-pagination>
      </div>
    </div>
    <div class="home-right">
      <div class="home-right-header">
        <p class="home-right-header-word">{{ this.compKeyword }}</p>
        <div class="home-right-header-upload">
          <el-button type="primary" @click="uploadVisible = true">文件上传</el-button>
          <el-dialog title="文件上传" :visible.sync="uploadVisible" :modal-append-to-body="false"
            custom-class="home-right-header-upload-dialog">
            <el-upload ref="upload" class="upload-demo" drag :http-request="singleInputWidget" :on-preview="handlePreview"
              :on-remove="handleRemove" :auto-upload="false">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
              <el-button @click="uploadVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitUpload">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
      <div class="home-right-trend">
        <div id="home-right-trend-graph"></div>
      </div>
      <div class="home-right-addition">
        <div id="home-right-trend-addition"></div>
      </div>
    </div>
  </div>
</template>

<script>
// import * as THREE from 'three'
// import CLOUDS from 'vanta/src/vanta.CLOUDS'

export default {
  name: 'Home',
  data() {
    return {
      compValue: {
        keyword: '',
        startDate: '' || '2023-12-04',
        endDate: '' || '2023-12-05',
        num: '' || 10
      },
      compKeyword: '',
      nums: [{
        value: '10',
        label: '10个'
      }, {
        value: '20',
        label: '20个'
      }, {
        value: '30',
        label: '30个'
      }, {
        value: '40',
        label: '40个'
      }, {
        value: '50',
        label: '50个'
      }],
      competeTableData: [],
      uploadVisible: false,
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数
      volumeX: [],
      volumeY: [],
      trendX: [],
      trendY: []
    }
  },
  mounted() {
    // this.vantaEffect = CLOUDS({
    //   el: this.$refs.clouds,
    //   THREE: THREE
    // })
    // // 这里重新设置样式
    // this.vantaEffect.setOptions({
    //   el: 'home',
    //   mouseControls: true,
    //   touchControls: true,
    //   gyroControls: false,
    //   minHeight: 200.00,
    //   minWidth: 200.00,
    //   scale: 1.00,
    //   scaleMobile: 1.00
    // })
    this.compValue.keyword = this.$route.query.keywords
    this.searchKeyword()
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    update(val) {
      // 点击强制刷新
      this.$forceUpdate()
      console.log('选中的数据', val)
    },
    resetTagFilter() {
      this.$refs.filterTable.clearFilter('competitiveness')
    },
    formatter(row, column) {
      return row.competitiveness
    },
    filterTag(value, row) {
      return row.competitiveness === value
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    init() {
      var _this = this
      var searchVolumeChart = this.$echarts.init(document.getElementById('home-right-trend-graph'))
      var searchVolumeOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: _this.volumeX,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: _this.volumeY
          }
        ]
      }
      searchVolumeOption && searchVolumeChart.setOption(searchVolumeOption)

      var trendChart = this.$echarts.init(document.getElementById('home-right-trend-addition'))
      var trendOption = {
        xAxis: {
          type: 'category',
          data: _this.trendX
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: _this.trendY,
            type: 'line'
          }
        ]
      }
      trendOption && trendChart.setOption(trendOption)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    submitUpload() {
      this.$refs.upload.submit()
      this.uploadVisible = false
    },
    toTrend(row, column, event) {
      console.log(row.compKeyword)
      this.compKeyword = row.compKeyword
      const config = {
        headers: {
          'Content-Type': 'application/json'
        }
      }
      var _this = this
      this.$axios.post('/trend/trend', {
        seedKey: _this.compValue.keyword,
        compKey: _this.compKeyword,
        endDate: _this.compValue.endDate,
        startDate: _this.compValue.startDate
      }, config)
        .then(successResponse => {
          console.log(successResponse.data)
          let start = new Date(_this.compValue.startDate)
          let end = new Date(_this.compValue.endDate)
          let time = end.getTime() - start.getTime()
          let days = parseInt(time / (1000 * 60 * 60 * 24)) + 1
          _this.trendX = []
          _this.trendY = []
          for (let i = 0; i < days; i++) {
            _this.trendX.push('')
            _this.trendY.push(successResponse.data.data[i][1])
          }
          _this.init()
        })
        .catch(failResponse => {
        })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    },
    searchKeyword() {
      // console.log(this.compValue)
      // var comp = {
      //   seedKey: this.compValue.seedKey,
      //   startDate: this.compValue.startDate,
      //   endDate: this.compValue.endDate,
      //   compNum: parseInt(this.compValue.num)
      // }
      const config = {
        headers: {
          'Content-Type': 'application/json'
        }
      }
      var _this = this
      this.$axios.post('/compkey/compkeys', {
        seedKey: _this.compValue.keyword,
        startDate: _this.compValue.startDate,
        endDate: _this.compValue.endDate,
        compNum: parseInt(_this.compValue.num)
      }, config)
        .then(successResponse => {
          var data = successResponse.data.data[0][0]
          console.log(successResponse.data.data)
          _this.competeTableData = []
          data.forEach(function (item, index) {
            var competitiveLevel = ''
            if (parseFloat(item[3]) > 0.5) {
              competitiveLevel = '高'
            } else if (parseFloat(item[3]) > 0.25) {
              competitiveLevel = '中'
            } else {
              competitiveLevel = '低'
            }
            let child = {
              compKeyword: item[2],
              competitiveness: item[3],
              competitiveLevel: competitiveLevel
            }
            console.log(child)
            _this.competeTableData.push(child)
          })
          let start = new Date(_this.compValue.startDate)
          let end = new Date(_this.compValue.endDate)
          let time = end.getTime() - start.getTime()
          let days = parseInt(time / (1000 * 60 * 60 * 24)) + 1
          _this.volumeX = []
          _this.volumeY = []
          for (let i = 0; i < days; i++) {
            _this.volumeX.push('')
            _this.volumeY.push(successResponse.data.data[i][0][0][1])
          }
          _this.init()
        })
        .catch(failResponse => {
        })
    },
    singleInputWidget(param) {
      // var _this = this
      // 创建FormData上传
      let formData = new FormData()
      // 将全部文件添加至FormData中
      formData.append('file', param.file)
      // 配置请求头
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      // 上传文件
      this.$axios.post('/updateFile/files', formData, config)
        .then(successResponse => {
          console.log(successResponse.data)
        })
        .catch(failResponse => {
        })
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home {
  display: flex;
  flex-direction: row;

  background: url("../../static/imgs/balloon.png");
}

.home-left {
  width: 35%;
  margin: 40px;
}

.home-left-header-word {
  font-size: 30px;
}

.home-left-search {
  display: flex;
  flex-direction: column;

  margin-top: 30px;
}

.home-left-search-input {
  display: flex;
  flex-direction: row;
}

.home-left-search-high {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;

  margin-top: 15px;

  width: 100%;
}

.home-left-search-high-date {
  display: flex;
  align-items: center;
}

.home-left-search-high-date-start:hover {
  position: relative;
  background: #fff;

  box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.1);
}

.home-left-search-high-date-end:hover {
  position: relative;
  background: #fff;

  box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.1);
}

.home-left-search-high-num-select:hover {
  position: relative;
  background: #fff;

  box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.1);
}

.el-divider {
  background-color: #215496;
}

.home-left-table {
  box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.4);
}

.el-table /deep/ tbody tr.table-row-checked,
.el-table /deep/ tbody tr:hover {
  position: relative;
  background: #fff;
}

.el-table /deep/ tbody tr.table-row-checked::after,
.el-table /deep/ tbody tr:hover::after {
  position: absolute;
  content: " ";
  width: 100%;
  height: 100%;
  left: 0;
  background: transparent;
  box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.1);
}

.home-right {
  width: 65%;
}

.home-right-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.home-right-header-word {
  font-size: 30px;
}

.home-right-header-upload {
  margin-right: 20%;
}

.el-button {
  border-radius: 0;
}

.home-right {
  margin: 40px;
}

#home-right-trend-graph {
  width: 100vh;
  height: 30vh;
}

.home-right-addition {
  margin-top: 60px;
}

#home-right-trend-addition {
  width: 100vh;
  height: 40vh;
}

.home-right-header-upload /deep/ .home-right-header-upload-dialog {
  max-width: 25%;
  min-width: 25%;
}

.home-right-header-upload /deep/ .el-dialog .el-dialog__body {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
